<template>
	<view class="product">
		<view class="btn">
			<button @tap="skip('/pages/customer/addCustomer')">添加</button>
			<button @tap="open">筛选</button>
			<button @click="reset">重置</button>
			<button @tap="open1" class="more">更多操作</button>
		</view>
		<view v-if="userList.length > 0">
			<view class="product_list">
				<view class="product_list_item" v-for="(item, index) in userList" :key="index">
					<view class="name">{{ item.cname }}</view>
					<view class="product_list_item_btn">
						<button @tap="
                skip(
                  `/pages/customer/customer_detail?cname=${item.cname}&cusAddress=${item.cusAddress}&cusMobile=${item.cusMobile}&id=${item.id}&cusTypeNo=${item.cusTypeNo}&cusTel=${item.cusTel}`
                )
              ">
							详情
						</button>
						<button @tap="
                skip(`/pages/customer/Reconciliation?topName=${item.cname}&cid=${item.cid}`)
              " class="Reconciliation">
							对账
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-else><u-divider textSize="34" text="暂无数据"></u-divider></view>
		<!-- <view style="margin: auto; width: 100%; text-align: center;margin-top: 50rpx;" v-else>~ 暂无数据 ~</view> -->

		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="toast">
				<view class="form">
						<view style="text-indent: 1em;margin: 20rpx 0;" class="text"> <text style="color: #fe3430;">*</text>客户: </view>
					<view class="select">
						<view style="display: flex;align-items: center; width: 100%;" class="">
							<input style="flex: 1;" v-model="user" type="text" placeholder="请输入客户" />
							<view @tap="openCus" class="seacchBtn">
								选择
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="" style="height: 300rpx;overflow: scroll;">
					<view @tap="changeCus(item)" style="text-align: center;line-height: 80rpx;font-size: 36rpx;"
						v-for="(item, index) in userList" :key="index">
						{{ item.cname }}
					</view>
				</view> -->
				<view class="btn">
					<view @tap="search">查询</view>
				</view>
			</view>
		</u-popup>
		<Customer ref="child" @saveUser="saveUser" />
		<u-popup :show="show1" mode="bottom" :round="20" @close="close1" @open="open1">
			<view class="toast1">
				<view class="top">
					<!-- <view @tap="skip('/pages/customer/addCustomer')"> 添加客户 </view> -->
					<view @tap="setShow"> 客户显示设置 </view>
				</view>

				<view class="button" @tap="show1 = false"> 取消 </view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import Customer from "../../components/CustomerScreening.vue"
	export default {
		data() {
			return {
				value11: false,
				value12: true,
				show: false,
				show1: false,
				list: [],
				user: "",
				userList: [],
			};
		},
		components: {
			Customer
		},
		methods: {
			saveUser(data) {
				this.user = data.cname;
				this.cid = data.cid;
				// this.accounts()
				this.$refs.child.close();
				// this.show=false
			},

			reset() {
				this.user = ''
				this.search()
			},
			changeCus(item) {
				this.user = item.cname;
				this.getList({
					pageNo: 1,
					pageSize: 999,
					keyword: this.user
				});

				this.show = false;
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			open1() {
				this.show1 = true;
			},
			close1() {
				this.show1 = false;
			},
			// 查询
			search() {
				this.getList({
					pageNo: 1,
					pageSize: 999,
					cname: this.user
				});
				this.show=false
			},
			openCus() {
				this.$refs.child.open();
			},
			setShow() {
				uni.navigateTo({
					url: "/pages/customer/show",
				});
				this.show1 = false;
			},
			getList(query) {
				// uni.showLoading({
				// 	title: "加载中..."
				// })
				this.$api.customerListApi({
					data: query
				}).then((res) => {
					if (res.code == 200) {
						this.list = res.result.list
						this.userList = res.result.list
					}
					// uni.hideLoading()
				});
			},
		},
		onShow() {
			this.show1 = false;
			this.getList({
				pageNo: 1,
				pageSize: 999
			});
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.product {
		padding: 30rpx;
		background-color: #f1f1f1;
		height: 100vh;

		.btn {
			display: flex;

			button {
				height: 58rpx;
				width: 146rpx;
				line-height: 58rpx;
				background: #fe3430;
				border-radius: 27rpx;
				color: #fff;
				margin: 0 10rpx 0 0;
			}

			.more {
				width: 200rpx;
			}
		}

		.product_list {
			margin-top: 18rpx;

			.product_list_item {
				width: 100%;
				height: 78rpx;
				background: #ffffff;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx;
				margin-bottom: 5rpx;

				.product_list_item_btn {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.u-switch {
						margin-right: 43rpx;
					}

					button {
						width: 124rpx;
						height: 48.5rpx;
					}

					.Reconciliation {
						margin-left: 18rpx;
					}
				}

				.name {
					font-weight: 600;
				}

				button {
					margin: 0;
					color: #fff;
					width: 124rpx;
					line-height: 48rpx;
					height: 48rpx;
					background: #fe3430;
					border-radius: 24rpx;
				}

				img {
					width: 12rpx;
					height: 24rpx;
				}

				.price {
					color: #bdbdbd;
				}
			}
		}

		.toast {
			padding: 16rpx 49rpx;
			border-radius: 29rpx;

			.btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;

				view {
					width: 463rpx;
					height: 97rpx;
					background: rgba(254, 52, 48, 0);
					border: 3rpx solid #272727;
					border-radius: 49rpx;
					line-height: 97rpx;
					text-align: center;
					margin: auto;
				}
			}

			.form {
				border-bottom: 1px solid #f1f1f1;
				padding: 0 0  0;

				.select {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.text {
						margin: 20rpx 0;
						color: #bdbdbd;
						margin-right: 20rpx;

						text {
							color: #fe3430;
						}
					}

					input {
						flex: 1;
						text-indent: 1em;
						height: 94rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}


				}
			}
		}

		.toast1 {
			padding: 16rpx 0rpx;
			// border-radius: 29rpx;
			background: #787878;
			text-align: center;

			.top {
				border-radius: 10rpx;
				background: #fff;
				margin-bottom: 20rpx;

				view {
					height: 100rpx;
					font-size: 40rpx;
					line-height: 100rpx;

					&:first-child {
						border-bottom: 1px solid #bdbdbd;
					}
				}
			}

			.button {
				border-radius: 10rpx;
				background: #fff;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 100rpx;
			}
		}
	}

	.seacchBtn {
		height: 88rpx;
		line-height: 88rpx;
		background: #fe3430;
		border-radius: 49rpx;
		color: #fff;
		margin-left: 20rpx;
		margin-right: 10rpx;
		width: 200rpx;
		font-size: 34rpx;
		text-align: center;
	}
</style>
